<template>
  <transition name="fade">
    <div class="toast-container" v-if="visible">
      <div class="content" :class="type">
        <i class="icomoon"></i>
        <span>{{ content }}</span>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      visible: true,
      content: "",
      type: "",
      time: 2000,
    };
  },
  methods: {
      close(){
          setTimeout(() => {
              this.visible=false;
          }, this.time);
      }
  },
  mounted() {
      this.close();
  },
};
</script>
<style lang="less" scoped>
.toast-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    z-index: 9999;
    .content {
        width: 300px;
        height: 50px;
        background: pink;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        i {
            margin-right: 5px;
        }
        &.info {
            background: #edf2fc;
            border: 1px solid #e0eafc;
            color: #909399;
            i{
                &::before{
                    content: '\ea0c';
                }
            }
        }
        &.success {
            background: #f0f9eb;
            border: 1px solid #e7f9de;
            color: #67c23a;
            i{
                &::before{
                    content: '\ea10';
                }
            }
        }
        &.warning {
            background: #fdf6ec;
            border: 1px solid #f9ecda;
            color: #e6a23c;
            i{
                &::before{
                    content: '\ea08';
                }
            }
    }
        &.error {
            background: #fef0f0;
            border: 1px solid #fbdfdf;
            color: #f56c6c;
            i{
                &::before{
                    content: '\ea0f';
                }
            }
    }
    }
}
.fade-enter-active,.fade-leave-active {
    transition: all ease-in-out .5s;
}
.fade-enter {
    opacity: 0;
}
.fade-enter-to {
    opacity: 0;
}
</style>
